import { WeElement, define } from 'omi'
import './index.css' 
import '../../components/disable-picker'
import '../../components/my-picker'
import arrows_right from '../../images/arrows-right.png'

import { post , createOrder , toastSuccess , toastErr , loading , today } from '../../utils/util';
import api from '../../api/api';

const app = getApp();


define('book-details',class extends WeElement{
  config = {
    navigationBarTitleText: '创建订单'
  }
  
  data={
    goods_list : [],
    sumMoney: 0,
    commodity:{},
    receive:{
      name:'receive',
      text:['到店自取'],
      disable:[1],
      choose:0
    },
    pay_way:{
      name: 'pay_way',
      text:['在线支付'],
      disable: [2],
      choose:0
    },
    goods_id:'',
    nickName: '',
    telphone:'',
    remarks:'',
    is_restaurant:'',
    food_address:''
  }
  install(option) {
    if( !app.globalData.access_token &&  !app.globalData.cartSelected ){
      wx.redirectTo({url: '../mine/index'});
      return;
    }
    this.data.goods_list = app.globalData.cartSelected;

    this.data.goods_list.forEach((item)=>{
      this.data.sumMoney += item.goods_price * item.goods_num;
    })
    // 点餐时会传的值
    this.data.is_restaurant = option.is_restaurant;
    this.data.food_address = option.food_address;

    this.data.nickName = app.globalData.userInfo.nickName;

    this.update();
  }
  sub = () => {
    if (this.data.commodity.count === 1) {
      this.data.commodity.count = 1;
    }else{
      this.data.commodity.count--;
      this.update();
    }
  }

  add = () => {
    this.data.commodity.count++
    this.update()
  }

  choose_change = (e) => {
    console.log(e);
    if(e.currentTarget.dataset.name=='receive'){
      this.data.receive.choose=e.detail;
      this.update;
    } else if (e.currentTarget.dataset.name == 'pay_way') {
      this.data.pay_way.choose = e.detail;
      this.update;
    }
  }

  choose_coupon=()=>{
    wx.wx.showToast({
      title: '您未有优惠券',
      icon: 'none',
      duration: 1500,
      mask: false,
    });
    // wx.navigateTo({
    //   url: '',
    // })
  }

  //获取输入的手机号
  getTlePhone = (e) => {
    this.data.telphone = e.detail.value;
  }
  //获取输入的备注
  getRemark = (e) => {
    this.data.remarks = e.detail.remarks;
  }

  submit=()=>{
    //手机正则
    let phoneRegExp = /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/;
    
    if(!app.globalData.access_token){
      toastErr('请先登录')
      setTimeout( ()=>{
        wx.switchTab({
          url: '../../mine/index'
        });
      },1500)
      return;
    }

    if (!phoneRegExp.test(this.data.telphone)) {
      toastErr('请输入正确的手机号')
      return;
    }
    // 美食，但不是扫码点餐，必须写备注
    if( this.data.is_restaurant && !this.data.food_address ) {
      if( !this.data.remarks){
        toastErr('请在备注填写餐厅信息')
        return;
      }
    }else{
      this.data.remarks = '餐厅 '+ this.data.food_address ;
    }

    loading('正在创建订单',true);

    let goods_list = []
    this.data.goods_list.forEach( (items)=>{
      var goods = {
          "goods_specification_id": items.goods_specification_id,   // 规格id
          "number": items.goods_num,
          "start_time": items.start_time || (today()),
          "is_restaurant": items.is_restaurant || false,
      }
      if(goods.is_restaurant){
        goods.food_address = items.food_address;
      }
      goods_list.push(goods)
    })

    createOrder({
      "access_token": app.globalData.access_token,
      "phone": this.data.telphone,
      "name": this.data.nickName,
      "remarks": this.data.remarks,
      "goods_list": goods_list
    },this.data.sumMoney , goods_list[0].start_time )
    
  }

  render(){
    const { goods_list , commodity,receive,pay_way} = this.data;
    return (
      <view class='book_bg'>
        <view class='book_content'>
          { goods_list.map( (items)=> 
            
          <view class='book_top_box'>
            <view class='book_top'>
              <view class='top_img_box'>
                <image src={items.goods_image}></image>
              </view>
              <view class='top_text'>
                <view class='top_name'>
                  {items.goods_name}
                </view>
                <view class='spec'>
                  <span>规格：</span>
                  <span>{items.goods_spec}</span>
                </view>
                <view class='price_box'>
                  <view class='price'>￥{items.goods_price}</view>
                  <view class='count'>×{items.goods_num}</view>
                </view>
              </view>
            </view>
          </view>
          
          )}
          
          <view class='detail'>
            {/* <view class='detail_item'>
              <view class='item_box'>
                <view class='item_name'>购买数量</view>
                <view class='counter'>
                  <button bindtap={this.sub}>
                    <view class='sub'>-</view>
                  </button>
                  <text>{commodity.count}</text>
                  <button bindtap={this.add}>
                    <view class='add'>+</view>
                  </button>
                </view>
              </view>
            </view> */}
            <view class='detail_item'>
              <view class='item_box'>
                <view class='item_name'>收货方式</view>
                <view class='picker_box'>
                  <disable-picker pick={receive} data-name={receive.name} onChoosechange={this.choose_change} />
                  <view class='arrows_right'>
                    <image src={arrows_right} />
                  </view>
                </view>
              </view>
            </view>
            <view class='detail_item'>
              <view class='item_box'>
                <view class='item_name'>支付方式</view>
                <view class='picker_box'>
                  <disable-picker pick={pay_way} onChoosechange={this.choose_change} data-name={pay_way.name} />
                  <view class='arrows_right'>
                    <image src={arrows_right} />
                  </view>
                </view>
              </view>
            </view>
            <view class='detail_item'>
              <view class='item_box'>
                <view class='item_name'>优惠券</view>
                <view class='picker_box'>
                  <view bindtap={this.choose_coupon}>请选择</view>
                  <view class='arrows_right'>
                    <image src={arrows_right} />
                  </view>
                </view>
              </view>
            </view>
            <view class='detail_item'>
              <view class='item_box'>
                <view class='item_name'>备注</view>
                <input class="remark" type="text" placeholder="请输入备注内容"  value={remarks} bindinput={getRemark} ></input>
              </view>
            </view>
            <view class='detail_item'>
              <view class='item_box'>
                <view class='count_price'>共<text>{commodity.count}</text>件商品,小计:<text class="price">￥{sumMoney}</text></view>
              </view>
            </view>
          </view>
          <view class='contacts_info'>
            <view class='detail_item'>
              <view class='item_box'>
                <view class='user_info'>联系人信息</view>
              </view>
            </view>
            <view class='detail_item'>
              <view class='item_box'>
                <view class='item_name'>姓名</view>
                <input class="remark" type="text" placeholder="请输入您的姓名" value={nickName}></input>
              </view>
            </view>
            <view class='detail_item'>
              <view class='item_box'>
                <view class='item_name'>手机号</view>
                <input class="remark" type="text" placeholder="请输入您的手机号" value={telphone} bindinput={getTlePhone}></input>
              </view>
            </view>
          </view>
          <view class="pay">
            <view class="count">合计金额：<view class="price">￥{sumMoney}</view></view>
            <view class="comfire" bindtap={this.submit}>确定</view> 
          </view>
        </view>
      </view>
    )
  }
})